<template>
  <div class="out">
    <span class="title">官方榜</span>
    <div v-for="(item,i) in MusicLists" class="hot-list">
      <div class="img-contain">
        <img :src="list[i].coverImgUrl" class="list-img" @click="turnDetail(list[i].id)">
        <span class="play-icon" @click="getId(list[i].id)">
          <i class="iconfont icon-bofang"></i>
        </span>
      </div>
      
      <el-table
        :data="MusicLists[i]"
        :show-header="false"
        size="mini"
        :row-class-name="tableRowClassName"
        @row-dblclick="jumpMusic">
        <el-table-column
          type="index">
        </el-table-column>
        <el-table-column
          prop="name"
          width="700">
          <template #default="scope">
            <span>{{scope.row.name}}</span>
            <span style="color: rgb(155,155,155);"
                  v-show="scope.row.alia[0]">({{scope.row.alia[0]}})</span>
          </template>
        </el-table-column>
        <el-table-column
          width="140"
          align="right">
          <template #default="scope">
            <span class="rowAr">
              {{conName(scope.row.ar)}}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span class="title">全球榜</span>
    <recPlaylist :List="list"></recPlaylist>
  </div>
</template>

<script>
import {request} from 'network/request'
import recPlaylist from '../recommend/childComps/recPlaylist'
export default {
  data(){
    return {
      list:[],
      MusicLists:[]
    }
  },
  components:{
    recPlaylist
  },
  methods:{
    async getList(){
      const data = await request("GET",'toplist')
      this.list = data.list
      console.log(data)
      let arr = ['19723756','3779629','2884035','3778678','5453912201']
      for(let i = 0 ; i < 5 ; i++ ){
        const a = await request("GET",'playlist/detail',{id:arr[i]})
        let track = []
        for(let j = 0 ; j< 5; j++){
          track.push(a.playlist.tracks[j])
        }
        this.MusicLists.push(track)
      }
    },
    conName(ar){
      let arr=[]
      for(let item in ar ){
        arr.push(ar[item].name)
      }
      return arr.join('/')
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 == 0) {
        return 'stripe';
      }
      return '';
    },
    jumpMusic(row){
      this.$store.commit('addMusic',row)
    },
    async getId(id){
      const data = await request("GET",'/playlist/detail',{id:id})
      this.$store.commit('addPlayList',data.playlist.tracks)
      localStorage.setItem('currentPlayListId',id)
    },
    turnDetail(id){
      this.$router.push('/playlistdetail/'+id+'/'+0)
    },
  },
  created(){
    this.getList()
  }
}
</script>

<style scoped>
  .out{
    padding:6px 90px;
  }
  .title{
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 13px;
    display: block;
  }
  .hot-list{
    display: flex; 
    margin-bottom: 50px;
    position:relative
  }
  .img-contain{
    margin-right: 30px;
    position: relative;
  }
  .list-img{
    width: 170px;
    height: 170px;
    border-radius: 5px;
    cursor: pointer;
  }
  .play-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 27px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    background-color: rgb(245,245,244);
    color: var(--netease-color);
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 1s ease-out;
    font-size: 21px;
    padding-left: 3px;
    cursor: pointer;
  }
  .play-icon i{
    font-size: 20px;
  }
  .img-contain:hover .play-icon{
    opacity: 1;
  }
  .rowAr{
    padding-right:10px;
    color:rgb(155, 155, 155);
    cursor: pointer;
  }
  .rowAr:hover{
    color: var(--font-color);
  }
</style>